<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Vincu.la</title>
  
  <link rel="stylesheet" href="/import/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/default.css">
  <link rel="stylesheet" href="/css/offcanvas.css">
  <link rel="stylesheet" href="/css/search-box.css">

  <!-- Esta tag serve para indicar que no topo aparecerá todas as tags <style> -->
  <!-- para habilitar esta tag, usar no app.js app.set('layout extractStyles', true) -->
  <%- style %>

</head>

<body>

  <div id="search-box">

    <div class="position-absolute w-100 d-flex justify-content-end">
      <button type="button" class="close searching p-4" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="d-flex h-100">
      <div class="m-auto col-md-10">
        <input type="text" class="form-control form-control-lg" placeholder="Buscar..." autofocus>
      </div>
    </div>

  </div>

  <% include ./parts/navbar %>

  <main class="container-fluid">
    <%- body %>
  </main>

  <footer class="footer">
    <% include ./parts/footer %>
  </footer>

  <!--   Core JS Files   -->
  <script src="/import/jquery/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    $(function () {
      'use strict'

      $('[data-toggle="offcanvas"]').on('click', function () {
        $('.offcanvas-collapse').toggleClass('open')
      })

      $('.searching').on('click', function () {
        $('#search-box').slideToggle('fast');
      })

    })
  </script>

     
  <!-- Esta tag serve para indicar que no rodapé aparecerá tudo que usar a tag <script> -->
  <!-- para habilitar esta tag, usar no app.js app.set('layout extractScripts', true) -->
  <%- script %>

</body>
</html>